import { createRef, RefObject, useEffect, useState } from 'react'
import * as eCharts from 'echarts'
import { LineChart } from './components'
import { echartsResize } from './util'
import './App.css'

function App() {
  const eChartsdRef: RefObject<HTMLDivElement> = createRef()

  const [lineChartData, setLineChartData] = useState({
    xData: [
      '2021/08/13',
      '2021/08/14',
      '2021/08/15',
      '2021/08/16',
      '2021/08/17',
      '2021/08/18',
    ],
    seriesData: [22, 19, 88, 66, 5, 90],
  })

  useEffect(() => {
    // console.log(eChartsdRef.current, '++++++++++')
    const myChart = eCharts.init(eChartsdRef.current as HTMLElement)
    let option = {
      // 标题
      title: {
        text: 'ECharts 入门示例',
      },
      tooltip: {},
      // 标记
      legend: {
        data: ['销量'],
      },
      // x轴
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '祙子'],
      },
      // y轴，这里不给，靠数据驱动
      yAxis: {},
      // 数据项
      series: [
        {
          name: '销量', // 数据项名称
          type: 'bar', // 图表类型（柱状图）
          data: [5, 20, 36, 10, 10, 20], // 数据
        },
      ],
    }
    myChart.setOption(option)
    echartsResize(myChart)
  }, [])

  useEffect(() => {
    setInterval(() => {
      setLineChartData({
        xData: [...lineChartData.xData, '2000/01/01'],
        seriesData: [
          ...lineChartData.seriesData,
          Math.floor(Math.random() * 1000),
        ],
      })
    }, 1500)
  }, [])
  return (
    <div className="App">
      <div className="chart" ref={eChartsdRef}></div>
      <div className="charWrapper">
        <LineChart
          title="折线图模拟数据"
          xData={lineChartData.xData}
          seriesData={lineChartData.seriesData}
        />
      </div>
    </div>
  )
}

export default App
